<template>
  <div class="side-bar">
    <el-menu default-active="2" class="el-menu-vertical-demo" @select="handleSelect">
      <template v-for="item in menuList">
        <el-sub-menu
          :index="item.path"
          :key="item.name"
          v-if="item.children && item.children.length > 0"
        >
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>{{ item.meta.title || '-' }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :index="child.path">{{
            child.meta.title
          }}</el-menu-item>
        </el-sub-menu>

        <el-menu-item
          :index="item.path"
          v-if="!item.children || item.children.length == 0"
          :key="item.path"
        >
          <div>{{ item.meta?.title || '-' }}</div>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { onMounted, computed } from 'vue'

const router = useRouter()
const store = useStore()
const menuList = computed(() => {
  let menuData = store._state.data?.globalData.menuData
  console.log(menuData, 1231)
  return menuData
})

/* 选择菜单 */
const handleSelect = (path) => {
  router.push(path)
}
</script>

<style lang="less" scoped>
.side-bar {
  position: absolute;
  width: 190px;
  height: calc(100% - 85px);
  margin: 10px 10px;
  border-radius: 10px;
  top: 55px;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
:deep(.el-menu) {
  background: transparent;
  border-right: 0;
}
</style>
